<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script type="module">
    // import {
    //     createRenderer,
    //     render,
    //     h
    // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js'
    // import {
    //     createRenderer,
    //     render,
    //     h,
    //     provide,
    //     inject,
    //     ref
    // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.prod.js'
    import {
        // renderOptions,
        h,
        render,
        Fragment,
        Text,
        createRenderer,
        provide,
        inject,
        ref
    } from "./runtime-dom.js"


    const p1 = {
        setup(props) {
            const name = ref('zs')
            setTimeout(() => {
                name.value = 'ls'
            }, 1000)
            provide('name', name)
            return () => {
                return h(p2)
            }
        }
    }

    const p2 = {
        render() {
            return h(p3)
        }
    }
    const p3 = {
        setup(props) {
            const name = inject('name')
            const age = inject('age', '18')
            return () => {
                return h('div', [name.value, age])
            }
        }
    }
    // 在父组件中提供数据，在后代组件获取数据
    //  p1 -> p2 -> p3 一层层传递
    render(h(p1), document.body)
</script>

</html>